i KATA PENGANTAR

Puji syukur ke hadirat Tuhan Yang Maha Esa, karena atas berkat dan rahmat-Nya, modul ajar "HTML Lengkap" dapat diselesaikan dengan baik. Modul ini dirancang sebagai panduan komprehensif untuk mempelajari HTML (HyperText Markup Language), bahasa dasar yang menjadi fondasi pembuatan website.

HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman web. Memahami HTML merupakan langkah pertama yang penting bagi siapa pun yang ingin belajar pengembangan web, baik itu web developer, desainer web, atau content creator.

Modul ini disusun secara sistematis mencakup 45 topik HTML yang lengkap:

HTML HOME
HTML Introduction
HTML Editors
HTML Basic
HTML Elements
HTML Attributes
HTML Headings
HTML Paragraphs
HTML Styles
HTML Formatting
HTML Quotations
HTML Comments
HTML Colors
HTML CSS
HTML Links
HTML Images
HTML Favicon
HTML Page Title
HTML Tables
HTML Lists
HTML Block & Inline
HTML Div
HTML Classes
HTML Id
HTML Buttons
HTML Iframes
HTML JavaScript
HTML File Paths
HTML Head
HTML Layout
HTML Responsive
HTML Computercode
HTML Semantics
HTML Style Guide
HTML Entities
HTML Symbols
HTML Emojis
HTML Charsets
HTML URL Encode
HTML vs. XHTML

Setiap topik dilengkapi dengan penjelasan teori, contoh kode, dan latihan praktikum. Kami berharap modul ini dapat membantu pembaca dalam menguasai HTML dengan mudah dan menyenangkan.

Tangerang, Januari 2026

Tim Penyusun

1 HTML HOME

Kompetensi Dasar

Memahami apa itu HTML dan fungsinya
Mengetahui sejarah dan perkembangan HTML
Memahami struktur dasar dokumen HTML

A. Apa itu HTML?

HTML (HyperText Markup Language) adalah bahasa markup standar untuk membuat halaman web. HTML menggambarkan struktur halaman web menggunakan markup atau tag. HTML bukan bahasa pemrograman, tetapi bahasa markup yang memberi tahu browser bagaimana cara menampilkan konten.

Definisi Lengkap:

HyperText: Teks yang memiliki tautan ke halaman atau konten lain
Markup: Tag-tag khusus yang memberi makna pada teks
Language: Bahasa yang memiliki aturan sintaks tertentu

Sejarah HTML:

Tahun	Versi	Fitur Utama
1991	HTML 1.0	Versi pertama, sangat sederhana
1995	HTML 2.0	Standarisasi fitur dasar
1997	HTML 3.2	Menambahkan tabel, applet, script
1999	HTML 4.01	Stylesheet, script, frame, objek
2000	XHTML 1.0	HTML sebagai XML
2014	HTML5	Multimedia, canvas, semantic elements

B. Cara Kerja HTML

HTML bekerja dengan cara memberi instruksi kepada web browser tentang bagaimana struktur dan konten halaman web akan ditampilkan. Prosesnya adalah:

Penulis web membuat dokumen HTML (file .html)
File HTML disimpan di web server
Browser meminta halaman web dari server
Server mengirimkan file HTML ke browser
Browser membaca tag HTML dan merender halaman
Pengguna melihat halaman web yang sudah diformat

C. Struktur Dasar HTML

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>

    <h1>Ini Heading</h1>
    <p>Ini paragraf.</p>

</body>
</html>

Penjelasan:

<!DOCTYPE html> - Deklarasi tipe dokumen HTML5
<html> - Elemen root dari halaman HTML
<head> - Berisi informasi meta tentang dokumen
<title> - Menentukan judul halaman (di tab browser)
<body> - Berisi konten yang ditampilkan

Hasil di Browser:

Ini Heading

Ini paragraf.

📌 Catatan Penting:

HTML tidak case-sensitive, tapi disarankan menggunakan huruf kecil
Setiap tag pembuka harus memiliki tag penutup (kecuali self-closing tags)
HTML5 adalah versi terbaru yang direkomendasikan

1

2 HTML INTRODUCTION

Kompetensi Dasar

Memahami konsep dasar HTML
Mengenal elemen dan tag HTML
Mampu membuat dokumen HTML sederhana

A. Konsep Dasar HTML

1. HTML adalah Bahasa Markup

HTML menggunakan tag untuk "menandai" teks dan memberi tahu browser bagaimana menampilkannya. Contoh: <h1>Teks</h1> menandai teks sebagai heading level 1.

2. HTML Tag

Tag HTML adalah kata kunci yang diapit oleh tanda kurung sudut, seperti <html>. Umumnya tag berpasangan: tag pembuka <tag> dan tag penutup </tag>.

3. HTML Element

Elemen HTML adalah segalanya dari tag pembuka hingga tag penutup, termasuk konten di dalamnya.

<h1>Ini adalah elemen heading</h1>

B. Anatomi Elemen HTML

Struktur Elemen HTML

<tagname attribute="value">Konten</tagname>

Keterangan:

<tagname> - Tag pembuka
attribute="value" - Atribut dengan nilainya
Konten - Isi elemen
</tagname> - Tag penutup

⚡ Praktikum 1: Halaman HTML Pertama

1 Buka text editor (Notepad, VS Code, Sublime, dll)

2 Tulis kode HTML berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Halaman Pertama Saya</title>
</head>
<body>
    <h1>Selamat Datang di HTML!</h1>
    <p>Ini adalah halaman web pertama yang saya buat menggunakan HTML.</p>
    <p>Saya sedang belajar HTML dan sangat menyenangkan!</p>
</body>
</html>

3 Simpan file dengan nama "index.html"

4 Buka file tersebut dengan web browser

Hasil di Browser:

Selamat Datang di HTML!

Ini adalah halaman web pertama yang saya buat menggunakan HTML.

Saya sedang belajar HTML dan sangat menyenangkan!

💡 Pro Tip:

Gunakan ekstensi .html atau .htm untuk file HTML
Nama file utama biasanya "index.html" (halaman default)
Gunakan indentation (spasi/tab) untuk membuat kode lebih rapi

3

3 HTML EDITORS

Kompetensi Dasar

Mengenal berbagai editor HTML
Memilih editor yang sesuai dengan kebutuhan
Mampu mengkonfigurasi editor untuk pengembangan HTML

A. Jenis-jenis HTML Editor

Kategori	Contoh	Kelebihan	Kekurangan
Text Editor Sederhana	Notepad (Windows), TextEdit (Mac)	Ringan, sudah tersedia	Fitur terbatas, tidak ada syntax highlighting
Code Editor	VS Code, Sublime Text, Atom, Notepad++	Syntax highlighting, auto-complete, plugin	Membutuhkan instalasi tambahan
IDE (Integrated Development Environment)	WebStorm, Eclipse, NetBeans	Fitur lengkap, debugging, integrated tools	Berat, kompleks untuk pemula
Online Editor	CodePen, JSFiddle, Replit, W3Schools TryIt	Akses online, preview langsung	Membutuhkan koneksi internet

⚡ Praktikum 2: Setup VS Code untuk HTML

1 Download dan Install VS Code

Kunjungi https://code.visualstudio.com/ dan download sesuai OS Anda

2 Install Extension yang Berguna

Live Server - Untuk melihat perubahan secara real-time
HTML CSS Support - Autocomplete untuk HTML dan CSS
Prettier - Format kode otomatis
Auto Rename Tag - Rename tag pembuka/penutup otomatis

3 Buat File HTML Baru

File → New File → Save as "latihan.html"

4 Ketik "!" lalu tekan Tab

VS Code akan menghasilkan boilerplate HTML5 secara otomatis

<!-- Hasil boilerplate otomatis di VS Code -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

6

4 HTML BASIC

Kompetensi Dasar

Memahami elemen dasar HTML
Mampu membuat dokumen HTML dengan struktur yang benar
Mengenal heading, paragraf, dan link

A. Elemen Dasar HTML

Berikut adalah elemen-elemen paling dasar dalam HTML:

1. Heading (Judul)

Heading didefinisikan dengan tag <h1> hingga <h6>, dengan <h1> sebagai yang terbesar.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Hasil Heading:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

2. Paragraf

Paragraf didefinisikan dengan tag <p>.

<p>Ini adalah sebuah paragraf.</p>
<p>Ini adalah paragraf lainnya. Browser akan menambahkan margin secara otomatis.</p>

3. Link

Link didefinisikan dengan tag <a> (anchor).

<a href="https://www.google.com">Kunjungi Google</a>

4. Gambar

Gambar didefinisikan dengan tag <img> (self-closing).

<img src="gambar.jpg" alt="Deskripsi gambar">

⚡ Praktikum 3: Halaman Profil Sederhana

<!DOCTYPE html>
<html>
<head>
    <title>Profil Saya</title>
</head>
<body>
    <h1>Budi Santoso</h1>
    <h2>Web Developer</h2>
    
    <h3>Tentang Saya</h3>
    <p>Saya adalah seorang web developer dengan pengalaman 3 tahun. Saya ahli dalam HTML, CSS, dan JavaScript.</p>
    
    <h3>Pendidikan</h3>
    <p>S1 Teknik Informatika - Universitas Indonesia (2020)</p>
    
    <h3>Kontak</h3>
    <p>Email: <a href="mailto:budi@email.com">budi@email.com</a><br>
    Website: <a href="https://budisantoso.com">budisantoso.com</a></p>
</body>
</html>

📝 Latihan Soal

Soal 1: Buat halaman HTML yang menampilkan biodata Anda dengan menggunakan heading untuk judul dan paragraf untuk deskripsi.

Soal 2: Buat halaman yang berisi daftar hobi Anda dengan menggunakan heading dan paragraf.

Soal 3: Buat halaman yang memiliki link ke 3 website favorit Anda.

8

5 HTML ELEMENTS

Kompetensi Dasar

Memahami konsep elemen HTML
Membedakan elemen block dan inline
Memahami elemen kosong (void elements)

A. Definisi Elemen HTML

Elemen HTML adalah komponen penyusun halaman web. Sebuah elemen HTML biasanya terdiri dari tag pembuka, konten, dan tag penutup.

Struktur Elemen:

Elemen dengan Konten

<p>Ini konten paragraf</p>

Tag pembuka: <p>
Konten: Ini konten paragraf
Tag penutup: </p>

Elemen Kosong (Void Element)

Contoh lain: <img>, <hr>, <input>

Tidak memiliki tag penutup dan konten

Jenis Elemen Berdasarkan Display:

Jenis	Karakteristik	Contoh
Block-level	Selalu dimulai di baris baru, mengambil lebar penuh	<div>, <p>, <h1>-<h6>, <ul>
Inline	Tidak memulai baris baru, hanya selebar kontennya	<span>, <a>, <img>, <strong>

⚡ Praktikum 4: Eksperimen Elemen HTML

<!DOCTYPE html>
<html>
<head>
    <title>Demo Elemen HTML</title>
</head>
<body>
    <!-- Contoh elemen block-level -->
    <div style="background-color: lightblue; padding: 10px; margin-bottom: 10px;">
        <h2>Ini adalah elemen DIV</h2>
        <p>DIV adalah elemen block-level yang biasa digunakan sebagai container.</p>
    </div>
    
    <!-- Contoh elemen inline -->
    <p>
        Ini adalah teks dengan 
        <span style="color: red; font-weight: bold;">elemen span</span>
         di dalamnya. Span adalah elemen 
        <strong>inline</strong>
         yang tidak memulai baris baru.
    </p>
    
    <!-- Contoh elemen kosong (void elements) -->
    <p>Ini baris pertama<br>Ini baris kedua setelah line break</p>
    <hr>
    <p>Garis horizontal di atas dibuat dengan tag &lt;hr&gt;</p>
</body>
</html>

10

6 HTML ATTRIBUTES

Kompetensi Dasar

Memahami konsep atribut HTML
Mengenal berbagai atribut umum
Mampu menggunakan atribut dengan benar

A. Apa itu Atribut?

Atribut HTML memberikan informasi tambahan tentang elemen HTML. Atribut selalu ditempatkan di tag pembuka dan biasanya berpasangan nama="nilai".

Struktur Atribut

Atribut Global (dapat digunakan di semua elemen):

Atribut	Deskripsi	Contoh
id	Memberi identitas unik pada elemen	<div id="header">
class	Mengelompokkan elemen untuk styling	<p class="text-muted">
style	Menambahkan CSS inline	<p style="color: red;">
title	Menampilkan tooltip saat hover	<a title="Klik untuk info">
lang	Menentukan bahasa konten	<html lang="id">

Atribut Khusus per Elemen:

Elemen	Atribut	Deskripsi
<a>	href	URL tujuan link
<img>	src, alt	Sumber gambar, teks alternatif
<input>	type, value, placeholder	Jenis input, nilai default, petunjuk
<form>	action, method	URL tujuan, metode pengiriman

⚡ Praktikum 5: Penggunaan Atribut

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Demo Atribut HTML</title>
    <style>
        .highlight { background-color: yellow; padding: 5px; }
        .warning { color: red; font-weight: bold; }
        #judul { color: blue; text-align: center; }
    </style>
</head>
<body>
    <!-- Atribut id untuk identifikasi unik -->
    <h1 id="judul">Belajar Atribut HTML</h1>
    
    <!-- Atribut class untuk pengelompokan -->
    <p class="highlight">Paragraf ini memiliki class highlight.</p>
    <p class="warning">Paragraf ini memiliki class warning.</p>
    <p class="highlight warning">Paragraf ini memiliki dua class.</p>
    
    <!-- Atribut style untuk inline CSS -->
    <p style="font-size: 20px; color: green; border: 1px solid green; padding: 10px;">
        Paragraf ini menggunakan atribut style untuk styling inline.
    </p>
    
    <!-- Atribut title untuk tooltip -->
    <p title="Ini adalah tooltip">
        Arahkan mouse ke teks ini untuk melihat tooltip.
    </p>
    
    <!-- Atribut pada link -->
    <a href="https://www.google.com" 
       target="_blank" 
       title="Buka Google di tab baru">
        Kunjungi Google
    </a>
    
    <!-- Atribut pada gambar -->
    <img src="https://via.placeholder.com/150" 
         alt="Placeholder image" 
         width="150" 
         height="150">
</body>
</html>

📌 Aturan Penulisan Atribut:

Nilai atribut harus diapit tanda kutip (bisa kutip ganda atau tunggal)
Penamaan atribut case-insensitive, tapi disarankan huruf kecil
Beberapa atribut bisa ditulis tanpa nilai (boolean attributes) seperti disabled, checked

12

7 HTML HEADINGS

Kompetensi Dasar

Memahami penggunaan heading dalam HTML
Membedakan level heading dari h1 hingga h6
Menerapkan hierarki heading yang benar

A. Heading dalam HTML

Heading adalah judul atau subjudul yang ingin ditampilkan di halaman web. HTML memiliki 6 level heading dari <h1> (paling penting) hingga <h6> (paling kurang penting).

Tabel Perbandingan Heading:

Tag	Ukuran Default	Penggunaan
<h1>	2em (32px)	Judul utama halaman
<h2>	1.5em (24px)	Subjudul level 1
<h3>	1.17em (18.72px)	Subjudul level 2
<h4>	1em (16px)	Subjudul level 3
<h5>	0.83em (13.28px)	Subjudul level 4
<h6>	0.67em (10.72px)	Subjudul level 5

Pentingnya Heading yang Tepat:

SEO: Search engine menggunakan heading untuk memahami struktur konten
Aksesibilitas: Screen reader menggunakan heading untuk navigasi
Struktur: Membantu pembaca memahami hierarki informasi

⚡ Praktikum 6: Membuat Struktur Artikel dengan Heading

<!DOCTYPE html>
<html>
<head>
    <title>Struktur Artikel</title>
</head>
<body>
    <!-- Heading utama artikel -->
    <h1>Panduan Lengkap Belajar HTML untuk Pemula</h1>
    
    <!-- Subheading -->
    <h2>1. Pengenalan HTML</h2>
    <p>HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman web...</p>
    
    <!-- Sub-subheading -->
    <h3>1.1 Sejarah HTML</h3>
    <p>HTML pertama kali dikembangkan oleh Tim Berners-Lee pada tahun 1991...</p>
    
    <h3>1.2 Versi HTML</h3>
    <p>HTML telah mengalami beberapa versi, dari HTML 1.0 hingga HTML5...</p>
    
    <!-- Subheading berikutnya -->
    <h2>2. Dasar-dasar HTML</h2>
    
    <h3>2.1 Struktur Dasar HTML</h3>
    <p>Setiap dokumen HTML memiliki struktur dasar yang terdiri dari...</p>
    
    <h3>2.2 Tag dan Elemen</h3>
    <p>Tag HTML adalah kata kunci yang diapit oleh tanda kurung sudut...</p>
    
    <!-- Bisa juga heading level 4, 5, 6 untuk sub-sub topik -->
    <h4>2.2.1 Tag Pembuka dan Penutup</h4>
    <p>Kebanyakan tag HTML berpasangan: <tag> dan </tag>...</p>
</body>
</html>

💡 Best Practice Heading:

Gunakan hanya satu <h1> per halaman (untuk judul utama)
Jangan melewati level heading (misal dari h2 langsung h4)
Gunakan heading untuk struktur, bukan untuk ukuran teks
Heading harus relevan dengan konten di bawahnya

📝 Latihan Soal

Soal 1: Buat struktur artikel dengan topik "Cara Membuat Kopi" menggunakan heading yang tepat (h1 untuk judul utama, h2 untuk langkah-langkah, h3 untuk detail setiap langkah).

Soal 2: Buat halaman yang menampilkan daftar isi buku dengan menggunakan heading berjenjang.

14

8 HTML PARAGRAPHS

Kompetensi Dasar

Memahami penggunaan tag paragraf
Mengatur teks dalam paragraf
Menggunakan line break dan horizontal rule

A. Paragraf dalam HTML

Paragraf didefinisikan dengan tag <p>. Browser akan secara otomatis menambahkan margin sebelum dan sesudah setiap paragraf.

Karakteristik Paragraf:

Merupakan elemen block-level
Memiliki margin default
Browser akan mengabaikan multiple spasi dan line break dalam kode HTML

<p>Ini adalah paragraf pertama. Meskipun kita menulis teks
di beberapa baris dalam kode HTML, browser akan menampilkannya
sebagai satu baris karena HTML mengabaikan line breaks.</p>

<p>Ini adalah paragraf kedua. Browser akan menambahkan jarak
secara otomatis antara paragraf.</p>

Line Break <br>

Tag <br> digunakan untuk membuat baris baru dalam teks, tanpa memulai paragraf baru.

Horizontal Rule <hr>

Tag <hr> digunakan untuk membuat garis horizontal, biasanya untuk memisahkan konten.

⚡ Praktikum 7: Format Teks dalam Paragraf

<!DOCTYPE html>
<html>
<head>
    <title>Demo Paragraf</title>
</head>
<body>
    <h1>Puisi Singkat</h1>
    
    <p>
        Karya: Chairil Anwar


        Kalau sampai waktuku

        'Ku mau tak seorang 'kan merayu

        Tidak juga kau


        Tak perlu sedu sedan itu

        Aku ini binatang jalang

        Dari kumpulannya terbuang
    </p>
    
    <hr>
    
    <h2>Prosa</h2>
    <p>
        HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman web. 
        Dengan HTML, kita dapat membuat teks menjadi tebal, 
        miring, atau bergaris bawah.
    </p>
    
    <p>
        HTML juga menyediakan tag &lt;pre&gt; untuk menampilkan teks 
        dengan format yang sama persis seperti yang ditulis dalam kode.
    </p>
    
    <pre>
        Ini adalah teks dengan tag pre.
        Spasi     dan     tab
        akan    dipertahankan
        persis seperti yang ditulis.
    </pre>
</body>
</html>

16

DAFTAR PUSTAKA

Buku Referensi

Robbins, J.N. (2020). Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics (5th ed.). O'Reilly Media.
Duckett, J. (2019). HTML and CSS: Design and Build Websites. Wiley.
Freeman, E., & Robson, E. (2021). Head First HTML and CSS (2nd ed.). O'Reilly Media.
McFarland, D.S. (2020). HTML5: The Missing Manual (3rd ed.). O'Reilly Media.
Meyer, E.A. (2018). HTML5: The Definitive Guide (7th ed.). O'Reilly Media.

Sumber Online

W3Schools HTML Tutorial - https://www.w3schools.com/html/
MDN Web Docs - https://developer.mozilla.org/en-US/docs/Web/HTML
HTML5 Specification - https://html.spec.whatwg.org/
W3C HTML Validator - https://validator.w3.org/
CodePen - https://codepen.io/

GLOSARIUM

Attribute

Informasi tambahan pada tag HTML yang memberikan properti atau perilaku tertentu.

Block-level element

Elemen yang selalu dimulai di baris baru dan mengambil lebar penuh halaman.

CSS (Cascading Style Sheets)

Bahasa stylesheet yang digunakan untuk mengatur tampilan halaman HTML.

DOCTYPE

Deklarasi di awal dokumen HTML yang memberitahu browser tentang versi HTML yang digunakan.

Element

Komponen penyusun halaman HTML, terdiri dari tag pembuka, konten, dan tag penutup.

Entity

Kode khusus yang digunakan untuk menampilkan karakter spesial dalam HTML.

Favicon

Ikon kecil yang muncul di tab browser, bookmark, dan address bar.

Hyperlink

Tautan yang menghubungkan satu halaman web ke halaman web lainnya.

Inline element

Elemen yang tidak memulai baris baru dan hanya mengambil selebar kontennya.

Markup

Tag-tag khusus yang digunakan untuk memberi makna pada teks dalam HTML.

Nesting

Penempatan elemen HTML di dalam elemen HTML lainnya.

Responsive Web Design

Pendekatan desain web yang membuat halaman tampil baik di berbagai ukuran layar.

Semantic HTML

Penggunaan elemen HTML sesuai dengan makna dan fungsinya, bukan hanya tampilannya.

Tag

Kata kunci yang diapit oleh tanda kurung sudut (< >) yang mendefinisikan elemen HTML.

URL (Uniform Resource Locator)

Alamat unik yang digunakan untuk mengakses sumber daya di internet.

Void element

Elemen HTML yang tidak memiliki konten dan tag penutup (self-closing).

W3C (World Wide Web Consortium)

Organisasi internasional yang mengembangkan standar web, termasuk HTML.

XHTML

Versi HTML yang ditulis dalam format XML, lebih strict dalam aturan penulisan.

INDEX

A

a tag 32
abbr tag 22
address tag 22
alt attribute 35
Attributes 12

B

b tag 20
blockquote tag 22
body tag 3
br tag 16
button tag 56

C

canvas tag 60
charset 84
cite tag 22
class attribute 52
code tag 72
color 26
comments 24
CSS 29

D

div tag 50
DOCTYPE 1

E

em tag 20
embed 60
Entities 78
Emojis 82

F

Favicon 38
File paths 62
footer tag 66
form tag 60

H

h1-h6 tags 14
head tag 64
header tag 66
hr tag 16
HTML 1

I

i tag 20
id attribute 54
iframe tag 58
img tag 35

J

JavaScript 60

K

kbd tag 72

L

label tag 56
lang attribute 3
Layout 66
li tag 45
link tag 32
Lists 45

M

main tag 66
mark tag 20
meta tag 64

N

nav tag 66

P

p tag 16
Page title 40
pre tag 72

Q

q tag 22
Quotations 22

R

Responsive 69

S

samp tag 72
script tag 60
section tag 66
Semantics 74
small tag 20
span tag 48
src attribute 35
strong tag 20
style tag 29
sub tag 20
sup tag 20
Symbols 80

T

table tag 42
tbody tag 42
td tag 42
textarea tag 60
tfoot tag 42
th tag 42
thead tag 42
title tag 40
tr tag 42

U

u tag 20
ul tag 45
URL Encode 86

V

var tag 72
video tag 60

W

W3C 88

X

XHTML 88

Pengaturan Halaman

Pengaturan Elemen

Manajemen Break

MODUL AJAR

HTML LENGKAP

i KATA PENGANTAR

DAFTAR ISI

1 HTML HOME

Kompetensi Dasar

A. Apa itu HTML?

Definisi Lengkap:

Sejarah HTML:

B. Cara Kerja HTML

C. Struktur Dasar HTML

Penjelasan:

Hasil di Browser:

Ini Heading

2 HTML INTRODUCTION

Kompetensi Dasar

A. Konsep Dasar HTML

1. HTML adalah Bahasa Markup

2. HTML Tag

3. HTML Element

B. Anatomi Elemen HTML

⚡ Praktikum 1: Halaman HTML Pertama

Hasil di Browser:

Selamat Datang di HTML!

3 HTML EDITORS

Kompetensi Dasar

A. Jenis-jenis HTML Editor

⚡ Praktikum 2: Setup VS Code untuk HTML

4 HTML BASIC

Kompetensi Dasar

A. Elemen Dasar HTML

1. Heading (Judul)

Hasil Heading:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

2. Paragraf

3. Link

4. Gambar

⚡ Praktikum 3: Halaman Profil Sederhana

📝 Latihan Soal

5 HTML ELEMENTS

Kompetensi Dasar

A. Definisi Elemen HTML

Struktur Elemen:

Elemen dengan Konten

Elemen Kosong (Void Element)

Jenis Elemen Berdasarkan Display:

⚡ Praktikum 4: Eksperimen Elemen HTML

6 HTML ATTRIBUTES

Kompetensi Dasar

A. Apa itu Atribut?

Atribut Global (dapat digunakan di semua elemen):

Atribut Khusus per Elemen:

⚡ Praktikum 5: Penggunaan Atribut

7 HTML HEADINGS

Kompetensi Dasar

A. Heading dalam HTML

Tabel Perbandingan Heading:

Pentingnya Heading yang Tepat:

⚡ Praktikum 6: Membuat Struktur Artikel dengan Heading

📝 Latihan Soal

8 HTML PARAGRAPHS

Kompetensi Dasar

A. Paragraf dalam HTML

Karakteristik Paragraf:

Line Break <br>

Horizontal Rule <hr>

⚡ Praktikum 7: Format Teks dalam Paragraf

DAFTAR PUSTAKA

Buku Referensi

Sumber Online

GLOSARIUM

INDEX